导航菜单
首页 >  微信小程序wxuploadFile 上传文件 的两个坑  > 微信小程序上传文件(可传 word、excel、ppt、视频、图片……)

微信小程序上传文件(可传 word、excel、ppt、视频、图片……)

目录前言示例代码

前言

近期做技术调研时发现微信官方支持文件上传了,这里记录一下

官方 API:wx.chooseMessageFile(Object object)

交互:从微信聊天里选择文件(选一个好友/群聊,从你们聊天记录里的文件里选)

点红框是预览,点右上角圆圈才是选中(昨天做技术调研时点红圈部分是预览,搞得我还以为只支持图片选择)

示例代码wx.chooseMessageFile({ count: 10, type: 'all', success (res) {// tempFilePath可以作为 img 标签的 src 属性显示图片// const tempFilePaths = res.tempFilesconst tempFilePaths = res.tempFiles[0].pathconst type = res.tempFiles[0].typeconsole.log(tempFilePaths, "tempFilePaths")console.log(type, "type")/*// word excel pptwxfile://tmp_1a3a5917bca43c3fa77c11df43d416df10e46c19618252e4.docx tempFilePathsfile typewxfile://tmp_9453f576fe6bfd2b18cfdc62cb91bda439fc0e8013eb6f7701d3e8395d132018.xlsx tempFilePathsfile typewxfile://tmp_48974d797db4b2ea7ad8db76106385989b5941c6bfdc5b5b186608263fac11b9.pptx tempFilePathsfile type// 视频、图片wxfile://tmp_21c1296f0b72c8d33cae70c993d5b85d95439b4940b4c07e.mp4 tempFilePathsvideo typewxfile://tmp_611597681c099cacb86e353b0b71adcb13a65700f46e8be7.jpg tempFilePathsimage type*/ }})

能拿到文件临时地址就能配合文件上传 API 将文件传上去了

参考:微信小程序如何上传word,excel文件 chooseUpload() {var that = thiswx.chooseMessageFile({ count: 10, type: 'file', extension: ['.xlsx', '.xls', '.XLSX', '.XLS', 'xlsx', 'xls', 'XLSX', 'XLS'], success(res) {const tempFilePaths = res.tempFilesfor (var i in tempFilePaths) { wx.uploadFile({url: 'http://xxx', //上传的服务器地址filePath: tempFilePaths[i].path,name: 'file',formData: { 'file': tempFilePaths[i].path},header: { [wx.getStorageSync('tokenName')]: wx.getStorageSync('token'),},success: function (resp) { console.log(resp) var data = JSON.parse(resp.data) console.log(data) if (data.code == 200) {wx.showToast({ title: '上传成功', icon: 'none', duration: 1300}) } else {wx.showToast({ title: data.message, icon: 'none', duration: 2000}) }},fail: function (err) { console.log(err)} })} }}) },

相关推荐: